<script type="text/javascript">
$(function() {
    $('#add_dialog').dialog({
			autoOpen: false,
	});
    $('#edit_dialog').dialog({
			autoOpen: false,
	});
		
    $("#addnew").click(function(){
        $('#add_dialog').dialog('open');
        $( "#add_dialog" ).dialog( "option", "width", 430);
        $( "#add_dialog" ).dialog( "option", "height", 220);
        return false;
    });
});
</script>
<a href="#" id="addnew"> Add a new category</a><br />
<div id="add_dialog"  title="Add a new category&nbsp;">
    <%= render(:partial => "create") %>
</div>
<div id="edit_dialog" title="Editing Category">
    <% if @editing %>
        <script>
            $('#edit_dialog').dialog('open');
            $("#edit_dialog" ).dialog( "option", "width", 430);
            $("#edit_dialog" ).dialog( "option", "height", 220);
        </script>
        <%= render(:partial => "update", :id => @editing) %>
    <% end %>
</div>
<br />
<table id="employee_table" class="tablesorter">
<thead>
    <tr>
      <th>
        Category Name
      </th>
      <th>
        Description
      </th>
      <th>      	
      </th>
      <th>
      </th>
    </tr>
</thead>
<tbody>
<% @categories.each do |c|%>
  <tr>
    <td>
        <%= c.name %>
    </td>
    <td>
      <%= c.description %>
    </td>
    <td>
        <%= link_to "Edit", {:action => "index", :id => c.id}, {:method => :post} %>
    </td>
    <td>
        <%= link_to "Delete", {:action => "delete", :id => c.id}, {:method => :post, :confirm => "Confirm removal of #{c.name}"} %>
    </td>
  </tr>
<% end %>
</tbody>
</table>
<script type="text/javascript">
    $("#employee_table").tablesorter();
</script>

